<template>
	<div class="public_content bg-color-white news_content">
		<!-- 图片新闻等 -->
		<div class="news_top over-h">
			<div class="pull-left h-330 over-h po-re">
				<div class="pull-left over-h w-530 h-330 po-re mr-20 over-h">
					<router-link :to="{path: `/news-detail/${bigImgList.id}/7`}">
						<img :src="bigImgList.image" class="di-b h-all center-block w-all">
						<div class="news_news_mask bottom-0 w-90b txt-overh" v-html="bigImgList.title"></div>
					</router-link>
				</div> 
				<div class="pull-left w-240">
					<div class="w-all h-160 di-ib po-re over-h" 
						v-for="(item,index) in smallImgList" :key="item.id">
						<router-link :to="{path: `/news-detail/${item.id}/7`}">
							<img :src="item.image" class="w-all h-all di-b">
							<div class="news_news_mask bottom-0 w-90b txt-overh" v-html="item.title"></div>
						</router-link>
					</div>
				</div>
			</div>
			<div class="pull-right w-370">
				<div class="mt-10">
					<ul class="public_card_content news-list lh-40">
						<li v-for="(item,index) in majorNewsList" :key="item.id">
							<router-link :to="{path: `/news-detail/${item.id}/7`}">
								<span v-html="item.title"></span>
							</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- 党建要闻等 -->
		<div class="news_state mt-25 di-fl">
			<!-- 左侧 -->
			<div class="pull-left over-h po-re w-800 pr-10 mr-10 hr-sr-dfdfdf">
				<div class="news_classification">
					<div class="public_card_title bg-img-card fcolor-white">
						<span class="fsize-18 pl-15">党建要闻</span> /
						<router-link :to="{path: `/index-list/${focusNewsId}`}" class="fcolor-white">更多</router-link>
					</div>
					<div class="mr-15 mt-15">
						<ul v-if="focusNewsList.length > 0">
							<li class="news_list_card mb-10 h-140 po-re w-all "
								v-for="(item,index) in focusNewsList.slice(0, 3)" :key="item.id">
								<router-link :to="{path: `/news-detail/${item.id}/0`}" class="news_list_card_a">
									<div class="w-180 h-130 pull-left over-h ">
										<img :src="item.image" class="h-all w-170 h-120">
									</div>
									<div class="news_list_txt p-10">
										<p class="news_list_title" v-html="item.title"></p>
										<p class="mt-30 fsize-14 fcolor-66 po-ab bottom-20 w-75b">
											<span class="public_button_stroke-ff6669 h-20 w-90 lh-20 fsize-14 mr-10">cjgly</span>
											<span>2018-04-13 15:21:26 </span>
											<span class="pull-right">12人浏览</span>
										</p>
									</div>
								</router-link>
							</li>
						</ul>	
					</div>
					<div class="public_card_title bg-img-card fcolor-white">
						<span class="fsize-18 pl-15">党建论坛</span> /
						<router-link :to="{path: `/index-list/${forumId}`}" class="fcolor-white">更多</router-link>
					</div>
					<div class="mr-15 mt-15">
						<ul v-if="forumList.length > 0">
							<li class="news_list_card mb-10 h-140 po-re w-all"
								v-for="(item,index) in forumList.slice(0, 3)" :key="item.id">
								<router-link :to="{path: `/news-detail/${item.id}/1`}" class="news_list_card_a">
									<div class="w-180 h-130 pull-left over-h ">
										<img :src="item.image" class="h-all w-170 h-120">
									</div>
									<div class="news_list_txt p-10">
										<p class="news_list_title" v-html="item.title"></p>
										<p class="mt-30 fsize-14 fcolor-66 po-ab bottom-20  w-75b">
											<span class="public_button_stroke-ff6669 h-20 w-90 lh-20 fsize-14 mr-10">cjgly</span>
											<span>2018-04-13 15:21:26 </span>
											<span class="pull-right">12人浏览</span>
										</p>
									</div>
								</router-link>
							</li>
						</ul>	
					</div>
					<div class="public_card_title bg-img-card fcolor-white">
						<span class="fsize-18 pl-15">党员风采</span> /
						<router-link :to="{path: `/index-list/${partyMienId}`}" class="fcolor-white">更多</router-link>
					</div>
					<div class="mr-15 mt-15">
						<ul v-if="partyMienList.length > 0">
							<li class="news_list_card mb-10 h-140 po-re w-all"
								v-for="(item,index) in partyMienList.slice(0, 3)" :key="item.id">
								<router-link :to="{path: `/news-detail/${item.id}/2`}" class="news_list_card_a">
									<div class="w-180 h-130 pull-left over-h ">
										<img :src="item.image" class="h-all w-170 h-120">
									</div>
									<div class="news_list_txt p-10">
										<p class="news_list_title" v-html="item.title"></p>
										<p class="mt-30 fsize-14 fcolor-66 po-ab bottom-20  w-75b">
											<span class="public_button_stroke-ff6669 h-20 w-90 lh-20 fsize-14 mr-10">cjgly</span>
											<span>2018-04-13 15:21:26 </span>
											<span class="pull-right">12人浏览</span>
										</p>
									</div>
						    </router-link>
						  </li>
						</ul>	
					</div>
					<div class="public_card_title bg-img-card fcolor-white">
						<span class="fsize-18 pl-15">党建先锋</span> /
						<router-link :to="{path: `/index-list/${partyPioneerId}`}" class="fcolor-white">更多</router-link>
					</div>
					<div class="mr-15 mt-15">
						<ul v-if="partyPioneerList.length > 0">
							<li class="news_list_card mb-10 h-140 po-re w-all"
								v-for="(item,index) in partyPioneerList.slice(0, 3)" :key="item.id">
								<router-link :to="{path: `/news-detail/${item.id}/3`}" class="news_list_card_a">
									<div class="w-180 h-130 pull-left over-h ">
										<img :src="item.image" class="h-all w-170 h-120">
									</div>
									<div class="news_list_txt p-10">
										<p class="news_list_title" v-html="item.title"></p>
										<p class="mt-30 fsize-14 fcolor-66 po-ab bottom-20  w-75b">
											<span class="public_button_stroke-ff6669 h-20 w-90 lh-20 fsize-14 mr-10">cjgly</span>
											<span>2018-04-13 15:21:26 </span>
											<span class="pull-right">12人浏览</span>
										</p>
									</div>
						    </router-link>
						  </li>
						</ul>	
					</div>
					<div class="public_card_title bg-img-card fcolor-white">
						<span class="fsize-18 pl-15">党建动态</span> /
						<router-link :to="{path: `/index-list/${partyDynamicId}`}" class="fcolor-white">更多</router-link>
					</div>
					<div class="mr-15 mt-15">
						<ul v-if="partyDynamicList.length > 0">
							<li class="news_list_card mb-10 h-140 po-re w-all"
								v-for="(item,index) in partyDynamicList.slice(0, 3)" :key="item.id">
								<router-link :to="{path: `/news-detail/${item.id}/4`}" class="news_list_card_a">
									<div class="w-180 h-130 pull-left over-h ">
										<img :src="item.image" class="h-all w-170 h-120">
									</div>
									<div class="news_list_txt p-10">
										<p class="news_list_title" v-html="item.title"></p>
										<p class="mt-30 fsize-14 fcolor-66 po-ab bottom-20  w-75b">
											<span class="public_button_stroke-ff6669 h-20 w-90 lh-20 fsize-14 mr-10">cjgly</span>
											<span>2018-04-13 15:21:26 </span>
											<span class="pull-right">12人浏览</span>
										</p>
									</div>
						    </router-link>
						  </li>
						</ul>	
					</div>
					<div class="public_card_title bg-img-card fcolor-white">
						<span class="fsize-18 pl-15">红色文艺</span> /
						<router-link :to="{path: `/index-list/${redLiteratureId}`}" class="fcolor-white">更多</router-link>
					</div>
					<div class="mr-15 mt-15">
						<ul v-if="redLiteratureList.length > 0">
							<li class="news_list_card mb-10 h-140 po-re w-all" 
								v-for="(item,index) in redLiteratureList.slice(0, 3)" :key="item.id">
								<router-link :to="{path: `/news-detail/${item.id}/5`}" class="news_list_card_a">
									<div class="w-180 h-130 pull-left over-h">
										<img v-if="item.image" :src="item.image" class="h-all w-170 h-120">
										<img v-else src="~@/assets/img/5b125a0bd901d.jpg" class="h-all w-170 h-120">
									</div>
									<div class="news_list_txt p-10">
										<p class="news_list_title" v-html="item.title"></p>
										<p class="mt-30 fsize-14 fcolor-66 po-ab bottom-20  w-75b">
											<span class="public_button_stroke-ff6669 h-20 w-90 lh-20 fsize-14 mr-10">cjgly</span>
											<span>2018-04-13 15:21:26 </span>
											<span class="pull-right">12人浏览</span>
										</p>
									</div>
								</router-link>
							</li>
						</ul>	
					</div>
					<div class="public_card_title bg-img-card fcolor-white">
						<span class="fsize-18 pl-15">党纪党规</span> /
						<router-link :to="{path: `/index-list/${partyRulesId}`}" class="fcolor-white">更多</router-link>
					</div>
					<div class="mr-15 mt-15">
						<ul v-if="partyRulesList.length > 0">
							<li class="news_list_card mb-10 h-140 po-re w-all" 
								v-for="(item,index) in partyRulesList.slice(0, 3)" :key="item.id">
								<router-link :to="{path: `/news-detail/${item.id}/6`}" class="news_list_card_a">
									<div class="w-180 h-130 pull-left over-h ">
										<img :src="item.image" class="h-all w-170 h-120">
									</div>
									<div class="news_list_txt p-10">
										<p class="news_list_title" v-html="item.title"></p>
										<p class="mt-30 fsize-14 fcolor-66 po-ab bottom-20  w-75b">
											<span class="public_button_stroke-ff6669 h-20 w-90 lh-20 fsize-14 mr-10">cjgly</span>
											<span>2018-04-13 15:21:26 </span>
											<span class="pull-right">12人浏览</span>
										</p>
									</div>
								</router-link>
							</li>
						</ul>	
					</div>
				</div>
				<div class="news_notice">
				    <div class="public_card_title bg-img-card fcolor-white">
				        <span class="fsize-18 pl-15">通知公告</span> /
						<router-link :to="{path: `/index-list/${noticeId}/8`}" class="fcolor-white">更多</router-link>
				    </div>
				    <div class="mr-15 mt-15">
						<div class="h-360 po-re over-h">
							<div>
								<img src="~@/assets/img/5adadeb9c11b8.jpg" class="w-all">
							</div>
							<div class="public_mask"></div>
							<p class="po-ab bottom-20 left-30 fcolor-white fsize-22 ">
								<span class="fsize-24 fcolor-f33 mr-10">//</span>
								习主席的思想启发了我们                            
							</p>
						</div>
						<ul class="mt-20" v-if="noticeList.length > 0">
							<li class="h-130 pb-10  public_word_lr_two w-all" 
								v-for="(item,index) in noticeList.slice(0, 3)" :key="item.id">
								<router-link :to="{path: `/news-detail/${item.id}`}" class="di-b h-all see-details">
									<div class=" pull-left h-all w-180 over-h">
										<img :src="item.image" class="di-b h-all center-block w-170 h-120" alt="党会开展通知">
									</div>
									<div class="di-tc fcolor-black p-10 text-l">
										<div class="fsize-18" v-html="item.title"></div>
										<div class="fcolor-99 mt-10 fsize-12">2018-01-02</div>
										<div class="h-60 lh-20 fcolor-66 fsize-14 mt-10 line-overf" v-html="item.content"></div>
									</div>
								</router-link>
							</li>
						</ul>
					</div>
				</div>		
			</div>
			<!-- 右侧 -->
			<div class="pull-right w-350">
				<!-- 快讯 -->
				<div class="news_flash">
					<div class="news_lasted w-all h-75 over-h po-re">
						<img src="~@/assets/img/news_bg_lasted.jpg" class="" alt="">
					</div>
					<ul>
						<li class="di-fl mb-20">
							<router-link :to="{path: `/news-detail`}" class="di-b h-all see-details">
								<div class="w-100 h-75 pull-left mr-10">
									<img class="w-all h-75" src="~@/assets/img/5ad071d14ad27.jpg" alt="">
								</div>
								<p class="pl-10 pull-left w-230 h-75 lh-25 over-h text-l line-overf fcolor-33 fsize-14">
									习近平：深入贯彻新时代党的强军思想 把人民海军全面建成世界一流海军                                    
								</p>
							</router-link>
						</li>
					</ul>	
				</div>
				<!-- 热点会议 -->
				<div class="mt-25">
					<div class="public_card_title">
						<span class="fsize-16">热点会议</span>
					</div>
					<div class="over-h">
						<div class="po-re">
							<div class="bg-color-mask po-ab top-0 left-0 w-all h-all po-re over-h">
								<div class="po-ab w-all bottom-5 fcolor-white text-l">
									<p class="w-all fsize-16 lh-30 hr-ib-fff">
										<span class="fsize-20 fcolor-f33 mr-10">//</span>三门峡市党支部大会
									</p>
									<p class="fsize-12 lh-20">地址：河南三门峡</p>
								</div>
							</div>
							<div>
								<img src="~@/assets/img/5adafa20d7152.jpg" class="di-b w-all" alt="三门峡市党支部大会">
							</div> 
						</div>                        
						<ul class="public_card_content lh-26 mt-20">
							<li>
								<router-link :to="{path: `/news-detail`}" class="see-details">
									三门峡市党支部大会
								</router-link>
							</li>
							<li>
								<router-link :to="{path: `/news-detail`}" class="see-details">
									三门峡市党支部大会
								</router-link>
							</li>
						</ul>	
					</div>	
				</div>
				<!-- 精选热文 -->
				<div class="mt-25">
					<div class="public_card_title">
						<span class="fsize-16">精选热文</span>
					</div>
					<div class="over-h">
						<div class="po-re w-350 h-250">
							<div class="bg-color-mask po-ab top-0 left-0 w-all h-all po-re over-h">
								<div class="po-ab w-all bottom-5 fcolor-white">
									<p class="w-all fsize-16 lh-30 hr-ib-fff txt-overh w-300">
										<span class="fsize-20 fcolor-f33 mr-10">//</span>
										习近平：深入贯彻新时代党的强军思想 把人民海军全面建成世界一流海军
									</p>
								</div>
							</div>
							<div>
								<img src="~@/assets/img/5adb04f31b2af.jpg" class="di-b w-all" alt="三门峡市党支部大会">
							</div> 
						</div>                        
						<ul class="public_card_content lh-26 mt-20">
							<li class="txt-overh w-300">
								<router-link :to="{path: `/news-detail`}" class="see-details">
									习近平：深入贯彻新时代党的强军思想 把人民海军全面建成世界一流海军
								</router-link>
							</li>
							<li class="txt-overh w-300">
								<router-link :to="{path: `/news-detail`}" class="see-details">
									李强会见沙特基础工业公司董事长阿尔-贾布一行
								</router-link>
							</li>
						</ul>	
					</div>	
				</div>
				<!-- 经典回顾 -->
				<div class="mt-25">
					<div class="public_card_title">
						<span class="fsize-16">经典回顾</span>
					</div>
					<div class="over-h">
						<div class="po-re">
							<div class="bg-color-mask po-ab top-0 left-0 w-all h-all po-re over-h">
								<div class="po-ab w-all bottom-5 fcolor-white">
									<p class="w-all fsize-16 lh-30 hr-ib-fff txt-overh w-300">
				      					<span class="fsize-20 fcolor-f33 mr-10">//</span>
				      					习近平：深入贯彻新时代党的强军思想 把人民海军全面建成世界一流海军
				      				</p>
								</div>
							</div>
							<div>
								<img src="~@/assets/img/5adb04f31b2af.jpg" class="di-b w-all" alt="三门峡市党支部大会">
							</div> 
						</div>                        
						<ul class="public_card_content lh-26 mt-20">
							<li class="txt-overh w-300">
								<router-link :to="{path: `/news-detail`}" class="see-details">
									全国政协机关开展义务植树活动
								</router-link>
							</li>
							<li class="txt-overh w-300">
								<router-link :to="{path: `/news-detail`}" class="see-details">
									陈敏尔唐良智会见新加坡总理公署部长陈振声
								</router-link>
							</li>
						</ul>	
					</div>	
				</div>
			</div>	
		</div>			
  </div>
</template>

<script>
	import '@/assets/css/common.css';
	export default {
		data () {
			return {
				pushTodayId:'039137fe6198466a85728ff7f99f2126',
				bigImgList:{},//顶部大图新闻
				smallImgList:[],//顶部小图新闻
				majorNewsList:[],//今日首推
				focusNewsId:'221a19008fcd4b17b6780febb0f088b8',
				focusNewsList:[],// 党建要闻
				forumId:'252da2668d754cdf9201349bedc3d507',
				forumList:[],   //党建论坛
				VanguardExampleList:[],// 先锋榜样
				partyMienId:'053551262afe4085b04c2f8d9ce06d60',
				partyMienList:[],// 党员风采	
				partyPioneerId:'afaa7a15198d4d1bb96094087322886e',
				partyPioneerList:[],//党建先锋
				partyRulesId:'6d276e7572d8410ab43af4166ca615e3',
				partyRulesList:[],//党纪党规
				partyDynamicId:'f38aa9a5322f466ba8cbaffe0ae36729',
				partyDynamicList:[],//党建动态
				redLiteratureId:'2',
				redLiteratureList:[],//红色文艺
				noticeId:'069d0ec015634c1cb95874b4b2d4e8fc',
				noticeList:[],  //通知公告
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init(){
				console.log(this.GLOBAL.BASE_URL)  //获取global中的全局变量
				this.$parent.$data.current = 1
				this.getNewsData()  //所有新闻列表
			},
			//所有新闻列表
			getNewsData(){
				this.$axios.get(`web/article/articleList`).then(res => {
					if(res.data && res.data.code === 0){
						res.data.data.map((item)=>{
							//今日首推
							if(item.id == this.pushTodayId){
								this.bigImgList = item.articleEntity[0]  
								this.smallImgList = item.articleEntity.slice(1, 3) 
								//今日首推
								this.majorNewsList = item.articleEntity.slice(3)
							}
							//党员风采
							if(item.id == this.partyMienId){
								this.partyMienList = item.articleEntity
							}
							//通知公告
							if(item.id == this.noticeId){
								this.noticeList = item.articleEntity
							}
							//红色文艺
							if(item.id == this.redLiteratureId){
								this.redLiteratureList = item.articleEntity
							}
							//党建要闻
							if(item.id == this.focusNewsId){
								this.focusNewsList = item.articleEntity
							}
							//党建论坛
							if(item.id == this.forumId){
								this.forumList = item.articleEntity
							}
							
							//党纪党规
							if(item.id == this.partyRulesId){
								this.partyRulesList = item.articleEntity
							}
							//党建先锋
							if(item.id == this.partyPioneerId){
								this.partyPioneerList = item.articleEntity
							}
							//党建动态
							if(item.id == this.partyDynamicId){
								this.partyDynamicList = item.articleEntity
							}
						})
					}else {
						this.$message.error(res.data.msg)
					}		
					
				})
			}
		}
	}
</script>

<style scoped>
	.public_content{
    box-sizing: border-box;
    width: 1200px;
    margin: 10px auto;
    padding: 0 16px;
    margin-bottom: 30px;
    border-radius: 3px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-top: 16px;
    padding-bottom: 16px;
    background-color: #f8f4eb;
}
/* 图片新闻 */
.news_news_mask{
    position: absolute;
    height: 44px;
		line-height: 44px;
		padding: 0 5%;
    background: linear-gradient(transparent, #000);
    color: #fff;
    text-align: center;
}
ul.public_card_content, ol.public_card_content{
    padding-left: 22px;
}
ul.public_card_content, ul.public_card_content > li{
    list-style:disc;
    color: #d9d9d9;
}
.public_card_content > li{
    font-size: 14px;
		text-align: left;
}
.public_card_content a{
    color: #333;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}
.public_card_content li{
    counter-increment: chapter;
}
.public_card_content a:before{
}
.public_card_content li:hover > a{
    color: #ff3032;
}
.news-list li:first-child a{
	font-size: 24px;
}
/* 分类新闻 */
.news_list_card{
    display: table;
}
.news_list_card_a{
    display: block;
    width: 100%;
    height: 100%;
}
.news_list_card_img, .news_list_txt{
    display: table-cell;
    vertical-align: middle;
    table-layout: fixed;
}
.news_list_txt{
    color: #666;
}
.news_list_title{
    font-size: 18px;
    color: #000;
}
.news_classification .news_list_txt p.po-ab{
	text-align: left;
}
.public_button_stroke-ff6669{
    display: inline-block;
    border: solid 1px #ff6669;
    border-radius: 4px;
    text-align: center;
    color: #ff6669;
}

/* 通知通告 */
.public_mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(rgba(255, 255, 255, .2), rgba(0, 0, 0, .2));
}
.article_height_over{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;    
    }
		.article_height_over p{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
        color: #666;
        font-size: 14px;

    }
/* 快讯 */

/* 热点会议 */

/* 精选热文 */
</style>